<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>综合案例：城市公交查询</title>
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/template.js"></script>
		<script id="itany" type="text/html">
			<h3>{{result[0].key_name}}公交({{result[0].front_name}}--{{result[0].terminal_name}}),共{{result[0].stationdes.length}}站)</h3>
			<ul>
				{{each result[0].stationdes as bus}}
				<li>{{bus.stationNum}}</li>.{{bus.name}}</li>
				{{/each}}
			</ul>
			</script>
			<script>
				var cities;
				
				$(function(){
					$.get("cities.json"),function(data){
						cities=data;
						for(var i=0;i<data.result.length;i++){
							var option=new Option(data.result[i].province,data.result[i].id);
							$("#province").append(option);
						}
					},"json");
					$("#province").change(function(){
						$("#city")[0].length=1
						var pid=this.value;
						for(var j=0;j<cs.length;j++){
													var option=new Option(cs[j].city,cs[j].id);
													$("#city").append(option);
												}
											}
										}
									});
						
									$("#btnQuery").on("click",function(){
										var city=$("#city :selected").html();
										var bus=$("#bus").val();
										$.get("http://op.juhe.cn/189/bus/busline?key=d0f4b2871864e03a11e43c3ccfbe018c&city="+city+"&bus="+bus,function(data){
											//console.log(data);
						
											var result=template("itany",data);
											$("#info").empty();
											if(data.result==null){
																	$("#info").html("亲，未找到相关公交线路哦！");
																	return;
																}
																$("#info").append(result);
											
															},"jsonp");
														});
											
													});

			</script>
	</head>
	<body>
		<h2>城市公交查询</h2>
			<div id="contents">
				<p>
					省份：
					<select id="province">
						<option value="0">--选择省份--</option>
					</select>
					城市：
					<select id="city">
						<option value="0">--选择城市--</option>
					</select>
				</p>
				<p>
					公交线路：
					<input type="text" id="bus">
				</p>
				<p>
					<input type="button" value="查询" id="btnQuery">
				</p>
			</div>
			<div id="info">
				
			</div>
	</body>
</html>
